<template>
  <section>
    <el-card>
      <el-row>
        <el-col :span="12">
          <h3>{{information.username}}</h3>
          <h5>{{information.phone}}</h5>
          <label>角色{{information.userTypeText}}</label>
          <label>来自{{information.cityName}}</label>
        </el-col>
        <el-col :span="12">
          <el-form>
            <el-form-item label="订单号">
              {{information.code}}
            </el-form-item>
            <el-form-item label="订单类型">
              {{information.modeText}}
            </el-form-item>
            <el-form-item label="订单状态">
              {{information.statusText}}
            </el-form-item>
            <el-form-item label="付款方式">
              {{information.payModeText}}
            </el-form-item>
            <el-form-item label="支付状态">
              {{information.payStatusText}}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <h3>订单详情</h3>
      <el-table :data="orderItem">
        <el-table-column label="商品" prop="productItemName"></el-table-column>
        <el-table-column label="单位" prop="chargeUnit"></el-table-column>
        <el-table-column label="单价" prop="pricePerUnit"></el-table-column>
        <el-table-column label="数量" prop="quantity"></el-table-column>
        <el-table-column label="小计" prop="price"></el-table-column>
      </el-table>
      <span><label>运费:{{orderItem.freight}}</label></span>
    </el-card>
    <el-card>
      <h3>承运人分配</h3>
      <el-select>
        <el-option></el-option>
      </el-select>
      <el-button>确认</el-button>
    </el-card>
    <el-card>
      <h3>资金流水</h3>
      <el-table :data="transaction">
        <el-table-column label="编号" prop="code"></el-table-column>
        <el-table-column label="类型" prop="subjectText"></el-table-column>
        <el-table-column label="金额" prop="amount"></el-table-column>
        <el-table-column label="时间" prop="createdAt"></el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <h3>运货单详情</h3>
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="运单编号">{{shipment.code}}</el-form-item>
          <el-form-item label="货运状态">{{shipment.human_status_name}}</el-form-item>
          <el-form-item label="发货时间">{{shipment.shipped_at}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="承运人姓名">{{shipment.courier_name}}</el-form-item>
          <el-form-item label="接单时间">{{shipment.picked_at}}</el-form-item>
          <el-form-item label="确认收货时间">{{shipment.completed_at}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="总重量">{{shipment.weight}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位运费">{{shipment.unit_freight_in_total}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-from-item label="收货地址">{{shipment.receiver_text}}</el-from-item>
        </el-col>
      </el-row>
    </el-form>
    </el-card>

  </section>
</template>

<style>

</style>
<script>
 export default{
   beforeMount() {
     this.loadOrderData()
     this.loadOrderItem()
     this.loadTransactions()
     this.loadShipment()
   },
   data(){
     return{
        information:{
          username:'',
          phone:'',
          userTypeText:'',
          cityName:'',
          code:'',
          modeText:'',
          statusText:'',
          payModeText:'',
          payStatusText:''
        },
        transaction:[{
          code:'',
          subjectText:'',
          amount:'',
          createdAt:''
        }],
        orderItem:[{
          productItemName:'',
          productItemText:'',
          chargeUnit:'',
          pricePerUnit:'',
          quantity:'',
          price:'',
          freight:''
        }],
        shipment:{
          code:'',
          courier_name:'',
          human_status_name:'',
          picked_at:'',
          shipped_at:'',
          completed_at:'',
          weight:'',
          unit_freight_in_total:'',
          receiver_text:''
        }
     }
   },
   methods: {
     loadOrderData(){
       let id=this.$route.params.id
       this.axios.get(`orders/${id}`).then(response=>{this.information=response.data})
     },
     loadOrderItem(){
        let orderId=this.$route.params.id
        this.axios.get(`orderItems/${orderId}`).then(response=>{this.orderItem=response.data})
     },
     loadTransactions(){
        let resourceId=this.$route.params.id
        this.axios.get(`transactions/${resourceId}`).then(response=>{this.transaction=response.data})
     },
     loadShipment(){
        let orderId=this.$route.params.id
        this.axios.get(`orders/${orderId}`).then(response=>{this.shipment=response.data})
     }
   }
 }

</script>
